﻿
<!DOCTYPE html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>用户登录界面</title>
<link href="${pageContext.request.contextPath}/css/bootstrap.css"
	rel="stylesheet">
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/htmleaf-demo.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/animate.min.css" />

<style type="text/css">
.form-bg {
	padding: 2em 0;
}

.form-horizontal {
	background: #fff;
	padding-bottom: 40px;
	border-radius: 15px;
	text-align: center;
}

.form-horizontal .heading {
	display: block;
	font-size: 35px;
	font-weight: 700px;
	padding: 35px 0;
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 30px;
}

.form-horizontal .form-group {
	padding: 0 40px;
	margin: 0 0 25px 0;
	position: relative;
}

.form-horizontal .form-control {
	background: #f0f0f0;
	border: none;
	border-radius: 20px;
	box-shadow: none;
	padding: 0 20px 0 45px;
	height: 40px;
	transition: all 0.3s ease 0s;
}

.form-horizontal .btn {
	float: right;
	font-size: 14px;
	color: #fff;
	background: #00b4ef;
	border-radius: 30px;
	padding: 10px 25px;
	border: none;
	text-transform: capitalize;
	transition: all 0.5s ease 0s;
}

/*界面动画*/
.form-horizontal {
	top: 50px;
	opacity: 0
}
</style>

</head>

<body>
	<script>

   $(function(){
		$(".form-horizontal").addClass('animated bounceInDown');
		$(".form-horizontal").animate({opacity:1},500);
		
	     });	
	     
	$(document).ready(function() {     
		$("#regists").click(function(){
					 var username = $("#username").val();
					 var password = $("#password").val();
					 var name = $("#name").val();
					 
					 
			if($("#username").val()==""){
					$("#error").empty();
					var e="账号不能空！！！";
					$("#error").append(e);
					return false;
				}
			if($("#name").val()==""){
					$("#error").empty();
					var e="用户名不能空！！！";
					$("#error").append(e);
					return false;
				}	
				
			if($("#password").val()==""){
					$("#error").empty();
					var e="密码不能空！！！";
					$("#error").append(e);
					return false;
				}	
					 
				$.ajax({
					url:"${pageContext.request.contextPath}/system/user/adduser",
					type:"POST",			
					data:{
						"username":username,
						"password":password,
						"name":name
						},
						
					dataType:"json",
					success:function(data){
					//alert(data);
						if(data==1){
							$("#error").empty();
							var e="账号重复!!";
							$("#error").append(e);
							return false;
							
						}
						
					   window.location.href="${pageContext.request.contextPath}/system/user/tologin";
					},
					error:function(){
						
					}
				});
            
	});		
});						
			
		</script>


	<div class="htmleaf-container">

		<header class="htmleaf-header">
			<h1>壁纸之家</h1>

		</header>
		<div class="demo form-bg">
			<div class="container">

				<div class="row">
					<div class="col-md-offset-3 col-md-6">
						<div class="form-horizontal">
							<span class="heading" style="margin-left: 80px;">用户注册 <a
								style="float: right; margin-right: 40px;"
								href="${pageContext.request.contextPath}/system/user/tologin"><span
									class="glyphicon glyphicon-remove del"></span>
							</a>
							</span>
							<div class="form-group ">
								<div id="error" style="color: red;"></div>
							</div>
							<div class="form-group ">
								<span class="glyphicon glyphicon-eye-open"
									style="left:55px; top:13px; position: absolute;"></span> <input
									type="text" class="form-control" id="username" placeholder="账号">
							</div>
							<div class="form-group">
								<span class="glyphicon glyphicon-user"
									style="left:55px; top:13px; position: absolute;"></span> <input
									type="text" class="form-control" name="name" id="name"
									placeholder="用户名">
							</div>

							<div class="form-group">
								<span class="glyphicon glyphicon-eye-close"
									style="left:55px; top:13px; position: absolute;"></span> <input
									type="password" class="form-control" id="password"
									placeholder="密码">
							</div>

							<div class="form-group">
								<button type="button" class="btn btn-primary btn-lg btn-block"
									id="regists">立刻注册</button>

							</div>

						</div>
					</div>
				</div>
			</div>
		</div>

	</div>

</body>
</html>

